<script setup lang="ts">

import AAnimate from "../animate/AAnimate.vue";
import {
  QTAnimationInterpolatorType,
  QTAnimationPropertyName,
  QTAnimationRepeatMode,
  QTAnimationValueType
} from "@quicktvui/quicktvui3";
import {QTAnimationInterpolator} from "@quicktvui/quicktvui3/dist/src/animation/types";

const props=defineProps({
  duration:{
    type:Number,
    default:6000
  },
  execute:{
    type:Boolean,
    default:true
  },
  width:{
    type:Number
  },
  height:{
    type:Number
  }
})
</script>

<template>
  <a-animate
      :transform="{
      type:QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ROTATION,
      valueType:QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
      values:[0,360],
      duration:duration,
      repeatCount:-1,
      interpolator:{
        type:QTAnimationInterpolatorType.QT_PATH_INTERPOLATOR
      }
        }"
      :execute="execute"
  >
    <div class="shimmer-bg"
         :style="{
      width,height
         }"
         :gradientBackground="{colors: ['#00ffffff', '#c8ffffff','#00ffffff'],orientation:1}"
    />
    <slot></slot>
  </a-animate>
</template>

<style scoped>
.shimmer-bg{
  background-color: transparent;
}
</style>
